<template>
  <el-main>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbNameP }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true"
             :model="formInline"
             class="el-form query-form el-form--label-right el-form--inline">
      <!-- 菜单名称 -->
      <el-form-item label="菜单名称">
        <el-input size="small"
                  v-model="formInline.name"
                  placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   type="primary"
                   @click="onSearch"
                   icon="el-icon-search">搜 索</el-button>
        <el-button size="small"
                   type="default"
                   @click="handleAdd"
                   icon="el-icon-plus">添 加</el-button>
        <el-button size="small"
                   type="primary"
                   @click="handleDelete()"
                   icon="el-icon-delete"
                   v-if="isMoreDel">
          批量删除
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData"
              style="margin-top:30px"
              row-key="id"
              width="99.9%"
              :tree-props="{children: 'children'}"
              reserve-selection="true">
      <!-- <el-table-column type="selection"
           @selection-change="handleSelectionChange"
                       width="50"
                       fixed="left"></el-table-column> -->
      <el-table-column prop="name"
                       width="200"
                       label="菜单名称"></el-table-column>
      <el-table-column prop="code"
                       label="菜单编号"></el-table-column>
      <el-table-column prop="url"
                       label="请求地址"></el-table-column>
      <el-table-column prop="icon"
                       label="图标"></el-table-column>
      <el-table-column prop="num"
                       label="排序"></el-table-column>
      <el-table-column prop="is_menu"
                       :formatter="formatMenu"
                       label="是否菜单"></el-table-column>
      <el-table-column prop="status"
                       :formatter="formatStatus"
                       label="是否开启"></el-table-column>
      <el-table-column label="操作"
                       width="200"
                       fixed="right">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="default"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="primary"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="centerDialogVisible"
               width="40%"
               center
               custom-class="center_dislog">
      <el-form ref="editForm"
               :model="editForm"
               label-width="100px">
        <!-- 菜单名称 -->
        <el-form-item label="菜单名称"
                      prop="Name">
          <el-input v-model="editForm.Name"></el-input>
        </el-form-item>
        <!-- 菜单编号 -->
        <el-form-item label="菜单编号"
                      prop="Code">
          <el-input v-model="editForm.Code"></el-input>
        </el-form-item>
         <!-- <el-tree style="max-height:200px;overflow-y: auto;"
                   :data="deptData"
                   show-checkbox
                   node-key="id"
                   :props="defaultProps"
                   ref="tree"
                   @check="handleNodeCheck"
                   class="myDialogTree"
                   :check-strictly="true">
          </el-tree> -->
        <!-- 父级菜单 -->
        <el-form-item label="父级菜单">
          <el-tree :data="tableData"
                   show-checkbox
                   @check="handleNodeClick"
                   node-key="code"
                   :props="defaultProps"
                   :default-checked-keys="menuDefaule"
                   ref="menu_tree"
                   :check-strictly="checkStrictly"
                   class="myDialogTree">
          </el-tree>
        </el-form-item>
        <!-- 请求地址 -->
        <el-form-item label="请求地址"
                      prop="Url">
          <el-input v-model="editForm.Url"></el-input>
        </el-form-item>
        <!-- 图标 -->
        <el-form-item label="图标"
                      prop="Icon">
          <el-input v-model="editForm.Icon"></el-input>
        </el-form-item>
        <!-- 排序 -->
        <el-form-item label="排序"
                      prop="SortNum">
          <el-input v-model="editForm.SortNum"></el-input>
        </el-form-item>
        <!-- 是否菜单 -->
        <el-form-item label="是否菜单">
          <el-radio-group v-model="editForm.IsMenu">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 是否开启 -->
        <el-form-item label="是否开启">
          <el-radio-group v-model="editForm.Status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注"
                      prop="Tips">
          <el-input v-model="editForm.Tips"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   :disabled="addDisabled"
                   @click="updateSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>
<script>
import {
  mapState
} from 'vuex'
import {
  menuList,
  menuAdd,
  menuEdit,
  menuDelete
} from '../../api.js'
export default {
  name: "systemMenu",
  data () {
    return {
      isAdd: true,
      dialogTitle: '',
      isMoreDel: false,
      centerDialogVisible: false,
      breadcrumbName: '',
      breadcrumbPath: '',
      breadcrumbNameP: '',
      tableData: [],
      checkStrictly: true,
      multipleSelection: [],
      editForm: {
        ResourceId:'',
        Name:'',
        Code:'',
        Url:'',
        Icon:'',
        Pid:'',
        Tips:'',
        SortNum:'',
        IsMenu:'',
        Status:'',
      },
      // 树形
      menuData: [],
      menuDefaule: [],
      defaultProps: {
        children: 'children',
        label: function (data, node) {
          return data.code + ' ' + data.name
        }
      },
      //分页
      currentPage: 1,
      total: 0,
      //查询栏默认展示数据
      formInline: {
        name: '',
      },
      addDisabled: false
    }
  },
  mounted () {
    this.breadcrumbName = this.$route.query.breadcrumbName
    this.breadcrumbPath = this.$route.query.breadcrumbPath
    this.breadcrumbNameP = this.$route.query.breadcrumbNameP

    this.getTableDate(this.formInline);
  },
  methods: {
    //获取表单
    getTableDate (searchObj) {
      var _this = this;
      menuList(searchObj).then(res => {
          if (res.ErrorCode == 0) {
              _this.tableData = res.Data
          } else {
            this.$message.error(res.ErrorMsg);
          }
        })
    },
    //表格分页
    handleSizeChange (val) {
      console.log(`每頁 ${val} 條`);
    },
    handleCurrentChange (val) {
      this.getTableDate(this.formInline);
    },
    //表格查询
    onSearch () {
      this.getTableDate(this.formInline);
    },
    //添加
    handleAdd () {
      this.isAdd = true;
      this.dialogTitle = '添 加';
      for (var k in this.editForm) {
        this.editForm[k] = ''
      }
      this.centerDialogVisible = true;
    },
    //表格的操作
    //编辑
    handleEdit (index, row) {
      this.isAdd = false;
      this.dialogTitle = '编 辑';
      this.centerDialogVisible = true;
      var _this = this;
      this.editForm.ResourceId = row.id
      this.editForm.Code = row.code
      this.editForm.Pid = row.pid
      this.editForm.Name = row.name
      this.editForm.Icon = row.icon
      this.editForm.Url = row.url
      this.editForm.SortNum = row.num
      this.editForm.Tips = row.tips
      this.editForm.IsMenu = row.is_menu
      this.editForm.Status = row.status
      setTimeout(function () {
        _this.$refs.menu_tree.setCheckedKeys([row.pid])
        _this.menuDefaule = [row.pid]
      }, 50)
    },
    //提交
    updateSubmit () {
      this.addDisabled = true;
      var _this = this;
      var dataObj = JSON.parse(JSON.stringify(_this.editForm)) ;
      dataObj.Status =this.editForm.Status*1
      dataObj.IsMenu = this.editForm.IsMenu*1
      var data={
        name:dataObj.Name,
        code:dataObj.Code,
        pid:dataObj.Pid,
        url:dataObj.Url,
        icon:dataObj.Icon,
        num:dataObj.SortNum,
        status:dataObj.Status,
        is_menu:dataObj.IsMenu,
        tips:dataObj.Tips
      }
      if (this.isAdd) {
        menuAdd(data).then(res => {
          if (res.ErrorCode == 0) {
            _this.addDisabled = false;
            _this.centerDialogVisible = false;
            _this.$message.success("添加成功");
            _this.getTableDate(_this.formInline);
          } else {
            _this.addDisabled = false;
            this.$message.error(res.ErrorMsg);
          }
        })
      }else{
        data.id = dataObj.ResourceId
        menuEdit(data).then(res => {
          if (res.ErrorCode == 0) {
            _this.addDisabled = false;
            _this.centerDialogVisible = false;
            _this.$message.success("编辑成功");
            _this.getTableDate(_this.formInline);
          } else {
            _this.addDisabled = false;
            this.$message.error(res.ErrorMsg);
          }
        })
      }
    },
    //删除
    handleDelete (index, row) {
      var _this = this
      _this.$confirm('此操作將刪除该数据, 是否继续？', '提 示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        center: true
      }).then(() => {
        menuDelete({
          id:row.id
        }).then(res => {
          if (res.ErrorCode == 0) {
            _this.$message.success("删除成功");
            _this.getTableDate(_this.formInline);
          } else {
            this.$message.error(res.ErrorMsg);
          }
        })
      }).catch(() => {
      });
    },
    //选中表格数据
    handleSelectionChange (val) {
      if (val.length == 0) {
        this.isMoreDel = false
      } else {
        this.isMoreDel = true
      }
      this.multipleSelection = val
    },
    //表格数据处理
    formatStatus (row, column, cellValue) {
      if (cellValue == 0) {
        return '关闭'
      } else {
        return '开启'
      }
    },
    formatMenu (row, column, cellValue) {
      if (cellValue == 0) {
        return '否'
      } else {
        return '是'
      }
    },
    handleNodeClick (node, checked, indeterminate) {
      console.log("node",node)
       if (checked.checkedKeys != []) {
         this.editForm.Pid = node.code
         this.$refs.menu_tree.setCheckedKeys([node.code])
      }
    },
  },
  computed: {
    ...mapState({
      access_token: state => state.access_token,
      baseUrl: state => state.baseUrl,

    }),
  },
}
</script>